<!-- eslint-disable vue/multi-word-component-names -->
<!-- 会员中心 -->
<template>
  <div class="main-container">
    <div class="container">
      <div class="avatar">
        <img :src="
                  'http://101.43.223.224:8765/image/getImageById?id=' +
                  getUserMemberManagerList.img
                " class="avatar-image">
      </div>
      <div class="content">
        <div class="spacer"></div>
        <div class="spacer"></div>
        <span class="username">{{ getUserMemberManagerList.frontDeskName }}</span>
        <div class="spacer"></div>
        <span class="expiration" v-if="frontMemberTime === null" @click="handleUnopenedMember">
          未开通会员 >
        </span>
        <span class="expiration" v-else-if="frontMemberTime !== null && frontMemberTime <= currentTime" @click="handleUnopenedMember">
          已过期 >
        </span>
        <span class="expiration" v-else @click="handleUnopenedMember">
          将于{{ getUserMemberManagerList.frontDeskMemberTime }}过期 >点击续费
        </span>
      </div>
    </div>
    <div class="info-container">
      <div class="info-box">
        <span>已购课程</span>
        <span>{{numberOfDigits}}节</span>
      </div>
      <div class="info-box info-box-border">
        <span>累计学习</span>
        <span>{{timeDiff}}天</span>
      </div>
      <div class="info-box">
        <span>累计节省</span>
        <span>{{getUserMemberManagerList.priceDifference}}￥</span>
      </div>
    </div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="section-title">
      <div class="section-title-left">
        <span><b>好课推荐</b></span>
      </div>
      <div class="section-title-right">
        <span class="discount">好课折扣gogogo</span>
      </div>
    </div>
    <div class="spacer"></div>
    <div class="course-container">
      <div class="course-box"  v-for="memberManagerPcList in getMemberManagerPcList" :key="memberManagerPcList.id" @click="handleMemberManagerPcListClick(memberManagerPcList)" >
        <div class="spacer"></div>
        <img :src="
                  'http://101.43.223.224:8765/image/getImageById?id=' +
                  memberManagerPcList.courseImg
                " class="course-image">
        <div class="spacer"></div>
        <span class="course-title">{{ memberManagerPcList.courseTitle }}</span>
        <div class="spacer"></div>
        <span class="course-price">￥ {{ memberManagerPcList.disPrice }}</span>
        <span class="course-original-price">￥ {{ memberManagerPcList.coursePrice }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { EventBus } from '@/main'
export default {
  data () {
    return {
      loginId: '',
      imgurl: '',
      loading: true,
      currentDate: '2021-06-01',
      lists: [],
      getMemberManagerPcList: [],
      getUserMemberManagerList: {},
      numberOfDigits: '',
      timeDiff: '',
      frontMemberTime: '',
      userInfo: {}
    }
  },
  computed: {
    currentTime () {
      return new Date()
    }
  },
  created () {
    // 获取用户存储的信息
    this.userInfo = JSON.parse(localStorage.getItem('user'))
    if (this.userInfo) {
      this.userInfo = this.userInfo.data
      this.loginId = this.userInfo.id
    }
    this.getMemberManagerPc()
    this.getUserMemberManager()
  },
  methods: {
    handleUnopenedMember () {
      this.$router.push('/memberplacing')
    },
    getUserMemberManager () {
      this.$axios
        .get('/FrontDeskUser/getUserMemberManager?id=' + this.loginId)
        .then((res) => {
          this.getUserMemberManagerList = res.data.data
          if (this.getUserMemberManagerList.purchase !== null && this.getUserMemberManagerList.purchase !== '') {
            // 遍历课程
            const purchaseArray = this.getUserMemberManagerList.purchase.split(',')
            // 获取课程数量
            this.numberOfDigits = purchaseArray.length
          } else {
            this.numberOfDigits = 0
          }

          // 获取当前时间
          const now = new Date()

          // 获取创建时间
          const createTime = new Date(this.getUserMemberManagerList.createTime)
          if (this.getUserMemberManagerList.frontDeskMemberTime) {
            this.frontMemberTime = new Date(this.getUserMemberManagerList.frontDeskMemberTime)
          } else {
            this.frontMemberTime = null
          }

          // 计算天数差
          this.timeDiff = Math.floor((now - createTime) / (1000 * 60 * 60 * 24))
        })
    },
    getMemberManagerPc () {
      this.$axios
        .get('/MemberManagerPc/getMemberManagerPc?uid=' + this.loginId)
        .then((res) => {
          this.getMemberManagerPcList = res.data.data.data
        })
    },
    handleMemberManagerPcListClick (memberManagerPcList) {
      // 判断是否登录
      if (this.loginId === null || this.loginId === '') {
        this.$confirm('您还未登录，请问是否登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户点击了确认按钮，进行登录操作
          EventBus.$emit('showLoginDialog', true)
        }).catch(() => {
          // 用户点击了取消按钮，不进行任何操作
        })
      } else {
        const formData = new FormData()
        formData.append('uid', this.loginId)
        formData.append('cid', memberManagerPcList.id)
        this.$axios.post('/Order/selectByTwoId', formData).then((res) => {
          if (memberManagerPcList.payType === 0) {
          // 执行跳转页面
            this.$router.push({
              path: '/courseVideo',
              query: {
                roid: JSON.stringify(memberManagerPcList)
              }
            })
          } else {
            if (res.data.data === null) {
              // 执行跳转页面
              this.$router.push({
                path: '/purchasecourses',
                query: {
                  roid: JSON.stringify(memberManagerPcList)
                }
              })
            } else {
              // 执行跳转页面
              this.$router.push({
                path: '/courseVideo',
                query: {
                  roid: JSON.stringify(memberManagerPcList)
                }
              })
            }
          }
        })
      }
    }
  }
}
</script>

<style>
.main-container {
  text-align: left;
  user-select: none;
}

.title {
  font-size: 18px;
}

.container {
  height: 90px;
  padding-left: 60px;
  padding-right: 20px;
  background-image: url("@/assets/vipbk.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 90%;
  box-sizing: border-box;
}

.avatar {
  float: left;
  width: 60px;
}

.avatar-image {
  height: 45px;
  width: 45px;
  margin-top: 23px;
  border-radius: 50%;
  border: solid 1px #fff;
}

.content {
  float: left;
}

.spacer {
  height: 20px;
}

.username {
  font-size: 12px;
  color: #949494;
}

.expiration {
  font-size: 13px;
  color: #5e5e5e;
}

.info-container {
  width: 90%;
  height: 126px;
  background: #fff;
  box-sizing: border-box;
  padding-left: 14px;
  padding-right: 14px;
  display: flex;
  align-items: center;
}

.info-box {
  width: 248px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-box-border {
  border-left: 1px solid #efeff4;
  border-right: 1px solid #efeff4;
}

.section-title {
  height: 30px;
}

.section-title-left {
  height: 30px;
  margin-right: 10px;
  font-size: 18px;
  float:left;
}

.section-title-right {
  height: 30px;
  margin-top: 4px;
  float:left;
}

.discount {
  font-size: 13px;
  color: #949494;
  letter-spacing: 1.1px;
}

.course-container {
  width: 90%;
  height: 540px;
  box-sizing: border-box;
  background-color: #fff;
  padding-left: 14px;
  padding-right: 14px;
}

.course-box {
  margin-top: 20px;
  width: 248px;
  height: 240px;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.course-box:hover {
  box-shadow: 1px 1px 2px 1px #ececec;
  border: solid 1px #ddd;
  cursor: pointer;
}

.course-image {
  width: 228px;
  height: 128.5px;
}

.course-title {
  font-size: 13px;
}

.course-price {
  font-size: 18px;
  color: #f46626;
  margin-right: 10px;
}

.course-original-price {
  font-size: 16px;
  text-decoration: line-through;
}

.spacer {
  height: 10px;
}
</style>
